<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>登录</title>
    <link rel="stylesheet" type="text/css" href="06.css">
    <style type="text/css">
        .login{
    border-style: solid;
    border-width: 1px;
    border-color: #c6ccd4;
    width: 356px;
    /*使用绝对布局
    position: absolute;
    margin-top:100px;
    margin-left: 200px;*/
    margin:0 auto;
}
.title{
    font-weight: bold;
    font-size: 20px;
    font-family: courier,serif;
    padding: 8px;
    height: 35px;
}
.title img{
    width: 130px;
    height: 32px;
}
.title_content, .title_img{
    float:left;

}
.title_content{
    margin:10px auto 3px 10px;
}
.content{
    margin:20px;
}
.sms_login{
    text-align: right;
    font-size: 14px;
}
.usrname, .pass, .submitBtn{
    width: 100%;
    font-size: 16px;
    padding: 8px 0px 8px 0px;
}
.sms_login, .usrname, .pass, .remember, .submitBtn{
    margin-bottom: 5px;
}
.usrname, .pass, .remember, .submitBtn, .register{
    margin-top: 6px;
}
.remember{
    font-size: 12px;
}
.problem_login{
    text-align: right;
    font-size: 12px;
}
.submitBtn{
    color: white;
    border-radius: 5px;
    background-color: #2066C5;
}
.register{
    text-align: right;
    font-size: 12px;
}
a:link, a:visited{
    text-decoration: none;
}
a:hover{
    text-decoration: underline;
}
hr{
    /*color: #E8E8E8;*/
    color: #D8D8D8;
}
.other_icon{
    height: 45px;
    background-color: #f0f6ff;
    margin-top: 55px;
}
.other_icon img{
    width: 72px;
    height: 40px;


    
}
.other_title{
    color: #606060;
    font-size: 12px;
    margin-bottom: 5px;

}


    </style>

</head>
<body>
    <div class="login">
        <div class="title">
            <div class="title_img">
                <img src="https://passport.baidu.com/passApi/img/loginlogo.png">
            </div>
            <div class="title_content">
                登录百度账号
            </div>                      
        </div>
        <div class="content">
           
            <form method="get">
                <input type="text" name="UserName" placeholder="手机/邮箱/用户名" class="usrname">
                <input type="password" name="UserPassword" placeholder="密码" class="pass">
                <div class="remember">
                    <input type="checkbox" name="Check"><span>下次自动登录</span>
                </div>
                
                <input type="submit" name="SubmitButton" value="登录" class="submitBtn">
            </form>
           
             <div class="sms_login">
                <a href="#" style="float:left">忘记密码？</a>
                <a href="">短信快捷登录</a>
            </div>
            
        </div>  
       
        <div class="other_login" style="height:50px">
           
            <div class="other_icon">
                    <div id="1" style="margin-top:11px;float:left;margin-left:15px;"><a href="#">扫码登录</a></div>
                    <div id="3" style="float:left; margin-left:25px;"><img src="4.png" img id-alt="qqweibo"> </div>
                    <div id="2" style="margin-top:11px; float:right;margin-right:25px;"><a href="">立即注册</a></div>    
            </div>    
                     
        </div>
    </div>
</body>
</html>